﻿@import "../../lib/bootstrap/scss/functions";
@import "variables";
@import "../../lib/bootstrap/scss/mixins";
@import "../../lib/bootstrap/scss/utilities";
@import "utilities";

main > .container-fluid {
    padding: 0;
}

.docs-wrapper {
    display: flex;
}

.docs-sidebar {
    flex: 0 0 320px;
    border-right: 1px solid rgba(0,0,0,0.1);

    .docs-search {
        position: relative;
        padding: 1rem 15px;
        margin-right: calc(var(--bs-gutter-x) * -0.5);
        margin-left: calc(var(--bs-gutter-x) * -0.5);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        display: flex;

        > .input-group-prepend {
            flex: 1 1 auto;
        }

        > .navbar-toggler {
            padding: 0;
            margin: 0;
            margin-left: 0.5rem;

            &:focus, &:active {
                box-shadow: none;
            }
        }
    }
}

.docs-menu > .navbar-nav {
    margin: 1rem;

    a {
        padding: .25rem 1.5rem;
        color: rgba(0,0,0,0.65);

        i {
            display: none;
        }

        &:hover, &:focus, &:active {
            color: rgba(0,0,0,0.85);
        }

        &.active {
            font-weight: 600;
            color: rgba(0,0,0,0.85);
        }
    }

    > .nav-group > a {
        font-weight: 700;
    }

    .menu-1 {
        a {
            padding: .25rem 1.5rem 0.25rem;
            font-size: 90%;
        }

        .nav-group > a, .menu-2 a {
            margin-left: 1rem;
        }

        .menu-2 .nav-group > a, .menu-3 a {
            margin-left: 2rem;
        }

        .menu-3 .nav-group > a, .menu-4 a {
            margin-left: 3rem;
        }

        .menu-4 .nav-group > a, .menu-5 a {
            margin-left: 4rem;
        }
    }

    .dropdown-indicator {
        &:after {
            transform: translateY(-50%) rotate(-40deg);
            right: auto;
            left: 5px;
        }

        &[aria-expanded=true]:after {
            transform: translateY(-50%) rotate(45deg);
        }
    }
}

.docs-menu.searching {
    .nav-group > a {
        pointer-events: none;
        cursor: pointer;
    }

    .collapse {
        display: block !important;
    }

    .dropdown-indicator:after {
        transform: translateY(-50%) rotate(45deg) !important;
    }
}

.docs-content {
    flex: 1 1 auto;
    padding: 1rem 0 0 1rem;

    .marked {
        div.pmb-0 {
            margin-bottom: 1rem;

            > p {
                margin-bottom: 0;
            }
        }

        > p {
            text-indent: 0;
        }
    }
}

.docs-toc {
    flex: 0 0 auto;
    position: relative;
    padding: 1rem;
    max-width: 300px;

    > ul {
        position: sticky;
        top: 105px;
    }

    a {
        color: rgba(0,0,0,0.65);
        padding-left: 0.25rem;
        border-left: 3px solid transparent;

        &:hover, &:focus, &:active, &.active {
            color: rgba(0,0,0,0.85);
        }

        &.active {
            border-color: $primary;
            color: $primary;
        }
    }

    .toc-h3 {
        padding-left: 0.5rem;
    }

    .toc-h4 {
        padding-left: 1rem;
    }

    .toc-h5 {
        padding-left: 1.5rem;
    }

    .toc-h6 {
        padding-left: 2rem;
    }
}

@include media-breakpoint-down(xl) {
    .docs-content {
        padding-right: 1rem;
    }

    .docs-toc {
        display: none;
    }
}

@include media-breakpoint-down(md) {
    .docs-wrapper {
        flex-direction: column;

        .docs-sidebar {
            flex: 0 0 auto;
            border-right: none;
        }

        .docs-toc {
            display: none;
        }
    }
}


@include media-breakpoint-up(md) {
    .docs-wrapper .docs-sidebar {
        .docs-search > .navbar-toggler {
            display: none;
        }

        .docs-menu {
            display: block;
        }
    }
}
